<template>
  <div id="app" >
    <transition :name="this.routerAni">
      <router-view class="router-view"></router-view>
    </transition>
  </div>
</template>

<script>
// import Loader from 'resource-loader'
// import { popup, openToast, openLoading, closeLoading } from './js/tools'
export default {
  name: 'app',
  data () {
    return {
      routerAni: ''
    }
  },
  mounted () {
    // this.initLoader()
  },
  methods: {
    // 用来加载资源, 有时候页面进入是需要提前加载所有图片并显示加载进度用这个
    initLoader () {
      // let loader = new Loader()
      // Object.keys(IMAGE_URLS).forEach(name => {
      //   loader.add(name, IMAGE_URLS[name])
      // })
      // loader.onProgress.add(() => {
      //   this.progress = Math.round(loader.progress)
      // })
      // loader.onComplete.add(() => {
      //   setTimeout(() => {
      //     this.loading = false
      //   }, 500)
      // })
      // loader.load()
      // window.loader = loader
    }
  },
  watch: {
    '$route' (to, from) {
      const toPathLen = to.path.length
      const fromPathLen = from.path.length
      this.routerAni = toPathLen < fromPathLen ? 'slide-right' : 'slide-left'
    }
  }
}
</script>

<style lang="scss">
@import './assets/css/config';
#app{
  position:relative;
  width:100%;
  height:100%;
}
.router-view{
  // position: absolute;
  position: fixed !important;
  width:100%;
  min-height:100%;
  background-color:$bgColor;
  transition: opacity .5s, transform .3s cubic-bezier(0.25,0.1,0.25,1);
}
.slide-left-enter{
  opacity:.5;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity:0;
  transform: translate3d(-33%, 0, 0);
}
.slide-right-enter {
  opacity:.5;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity:0;
  transform: translate3d(33%, 0, 0);
}
</style>
